<template>
  <div class="articleEdit">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/articles/list' }"
        >文章管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ id ? "编辑" : "新建" }}文章</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form label-width="50px" :model="article">
            <el-form-item label="封面">
              <el-upload
                class="upload"
                :action="baseURL + '/upload'"
                :show-file-list="false"
                :on-success="afterImgUpoad"
              >
                <img v-if="article.coverImg" :src="article.coverImg" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="标题">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入标题"
                v-model="article.title"
              ></el-input>
            </el-form-item>
            <el-form-item label="简介">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入简介"
                v-model="article.introduction"
              ></el-input>
            </el-form-item>
            <el-form-item label="权重">
              <el-input v-model="article.weight"></el-input>
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="article.author"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveArticle">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="18">
          <el-form :model="article">
            <el-form-item>
              <VueEditor
                v-model="article.body"
                id="editor"
                useCustomImageHandler
                @image-added="handleImageAdded"
                style="min-height: 500px"
              />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { VueEditor } from "vue3-editor";
import { onBeforeMount, reactive, toRefs } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { postData, putData, getData, baseURL } from "../../services/http";
export default {
  name: "articleEdit",
  components: { VueEditor },
  props: { id: {} },
  setup(props) {
    const router = useRouter();
    const state = reactive({
      article: {},
    });
    const stateAsRefs = toRefs(state);
    const getArticleDetail = async () => {
      const res = await getData(`rest/articles/${props.id}`);
      state.article = res.data;
    };
    const saveArticle = async () => {
      let res;
      if (props.id) {
        await putData(
          `rest/articles/${props.id}`,
          state.article,
          "修改文章成功"
        );
      } else {
        await postData("rest/articles", state.article, "创建文章成功");
      }
      router.push("/articles/list");
    };
    onBeforeMount(() => {
      props.id && getArticleDetail();
    });

    const handleImageAdded = async (
      file,
      Editor,
      cursorLocation,
      resetUploader
    ) => {
      const formData = new FormData();
      formData.append("file", file);
      const res = await postData("upload", formData, "图片上传成功");
      Editor.insertEmbed(cursorLocation, "image", res.data.url);
      resetUploader();
    };
    const afterImgUpoad = (res) => {
      state.article.coverImg = res.url;
    };
    return {
      ...stateAsRefs,
      saveArticle,
      handleImageAdded,
      baseURL,
      afterImgUpoad,
    };
  },
};
</script>
<style>
.upload {
  text-align: center;
  height: 200px;
  width: 200px;
}
.upload .el-upload {
  width: 100%;
  height: 100%;
}
.upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ql-editor.ql-blank {
  min-height: 400px;
}
</style>